<template>
  <div id="backDialog" class="dialog" v-if="visible">
    <div class="dialog_body">
      <div class="img_1">
        <img src="../assets/complete.png" alt="" />
      </div>
      <div class="img_2">
        <img src="../assets/scene.png" alt="" @click="handleConfirm" />
      </div>
      <div class="img_3">
        <img src="../assets/reload.png" alt="" @click="handleCancel" />
      </div>
      <div class="img_4">
        <img id="share" src="../assets/share_1.png" alt="" @click="sharePage" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "../router/index";
import { clickAnimation } from "../utils/animation";
import { wechatShare } from "../utils/utils";

defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["close"]);

const handleConfirm = () => {
  clickAnimation("backConfirm", 200, () => {
    router.push("/home");
  });
};
const handleCancel = () => {
  emit("close");
};
const sharePage = () => {
  clickAnimation("share", 200, () => {
    wechatShare();
  });
};
</script>

<style lang="scss" scoped>
.dialog {
  .dialog_body {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .img_1 {
      width: 100%;
      margin-bottom: 2rem;
    }
    .img_2,
    .img_3,
    .img_4 {
      width: 50%;
      margin-bottom: 1rem;
      cursor: pointer;
    }
  }
}
</style>
